<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
			*{
				margin:0;
				padding:0;
				line-height: 1;
				text-align: center;
			}
			.inl-block{
				display: inline-block;
				vertical-align: top;
			}
			.wraper{
				width:300px;
				margin:150px auto;
				border:1px solid #d5d5d5;
				font-size:0;
			}
			.input{
				height:24px;
				border-bottom: 1px solid #d5d5d5;
				font-size:14px;
			}
			.wraper .bottom{
				white-space: nowrap;
			}
			.wraper .bottom .left{
				width:280px;
				height:324px;
				overflow: hidden;
				border-right: 1px solid #d5d5d5;
				font-size:14px;
				text-align: left;
			}
			.wraper .bottom .left .l-box .title,.wraper .bottom .left .l-box .name{
				text-align: left;
				padding-left:5px;
				padding-top:3px;
			}
			.wraper .bottom .left .l-box{
				/*transition: all .5s linear;*/
			}
			.wraper .bottom .right{
				width:20px;
				font-size:14px;
			}
			.wraper .bottom .right .r-box{
				padding: 5px 0px;
			}
			.wraper .bottom .right .r-box:hover{
				background:#0099ff;
				color:#fff;
				cursor:pointer;

			}
			.wraper .bottom .right .r-box:not(:nth-last-of-type(1)){
				border-bottom: 1px solid #d5d5d5;
			}
			.wraper .bottom .left .l-box .title{
				color:#bb9999;
			}
        </style>
    </head>
    <body>
    	<div class="wraper">
			<div class="input"></div>
			<div class="bottom">
				<div class="left inl-block" id="left">
					<div class="l-box" id="A">
						<div class="title">A</div>
						<div class="name">阿西吧</div>
					</div>
					<div class="l-box" id="B">
						<div class="title">B</div>
						<div class="name">卜娜娜</div>
						<div class="name">白展糖</div>
					</div>
					<div class="l-box" id="C">
						<div class="title">C</div>
						<div class="name">蔡小诗</div>
						<div class="name">蔡小诗</div>
						<div class="name">蔡小诗</div>
						<div class="name">蔡小诗</div>
						<div class="name">蔡小诗</div>
						<div class="name">蔡小诗</div>
						<div class="name">蔡小诗</div>
						<div class="name">蔡小诗</div>
						<div class="name">蔡小诗</div>
						<div class="name">蔡小诗</div>
						<div class="name">蔡小诗</div>
						<div class="name">蔡小诗</div>
						<div class="name">蔡小诗</div>
						<div class="name">蔡小诗</div>
					</div>
				</div>
				<div class="right inl-block">
					<div class="r-box">A</div>
					<div class="r-box">B</div>
					<div class="r-box">C</div>
					<div class="r-box">D</div>
					<div class="r-box">E</div>
					<div class="r-box">F</div>
					<div class="r-box">G</div>
					<div class="r-box">H</div>
					<div class="r-box">I</div>
					<div class="r-box">J</div>
					<div class="r-box">K</div>
					<div class="r-box">L</div>
					<div class="r-box">M</div>
				</div>
			</div>
    	</div>
    	<script type="text/javascript">
    		var right = document.getElementsByClassName('right')[0];
    		var items = right.getElementsByClassName('r-box');
    		var length = items.length;
    		var count = length;//while中使用
    		var scrollFunc=function(e){
    			//鼠标滚动方向判断

    		     if(e.wheelDelta){//IE/Opera/Chrome
    		         direct=e.wheelDelta;
    		     }else if(e.detail){//Firefox
    		         direct=e.detail;
    		     }
    		     return direct;
    		}

            var mark = false;
    		var handleScroll = function(e){
                if(mark) return;
    			var event = e || window.event;
    			if(scrollFunc(event) > 0){//向上滚动
    				for(var i = 0; i < length; i++){
                        !function(i){
        					if( items[0].innerHTML === 'A'){
          						return;
        					}
        					var temp = window.parseInt(items[i].innerHTML.charCodeAt(0),10)-1;
        					setTimeout(function(){
                                items[i].innerHTML = String.fromCharCode(temp);
                                mark = true;
                            },100*i);
                        }(i);
    				}
    			}else{//向下滚动
    				for(var i = 0; i < length; i++){
                        !function(i){
        					if(items[length-1].innerHTML === 'Z')
        						return;
        					var temp = window.parseInt(items[i].innerHTML.charCodeAt(0),10)+1;
        					setTimeout(function(){
                                items[i].innerHTML = String.fromCharCode(temp);
                                mark = true;
                            },100*(length-i));
                        }(i);
    				}
    			}
                mark = false;
    		}
    		//以下为右侧鼠标滚动事件
    		if(document.addEventListener){//W3C
    		    right.addEventListener('mousewheel', handleScroll);
    		}else if(window.navigator.userAgent.match('Firefox')){//火狐
    			right.addEventListener('DOMMouseScroll', handleScroll);
    		}else{//IE
    			right.onmousewheel = handleScroll;
    		}

    		//为右侧字母方块绑定点击事件
    		var showName = function(e){
    			var event = e || window.event;
    			var self = e.target;
    			//计算每一个name块如果显示在最高层，第一个块儿需要向上挪动的距离
    			var heightArr ={};//用来存储各块儿离顶部的距离
    			var lBox = document.getElementsByClassName('l-box');
    			for( var i = 0; i < lBox.length;i++){
    				if(i ==0){
    					heightArr[lBox[i].id] = 0;
    					continue;
    				}
    				else{
    					heightArr[lBox[i].id] = 0;
    					for(var j = 0;j < i;j++)
    						heightArr[lBox[i].id] += parseInt(lBox[j].clientHeight);
    				}
    			}

    			if(document.getElementById(self.innerHTML)){
    				// console.log('self.innerHTML: ' + self.innerHTML);
    				// console.log('heightArr[self.innerHTML]: '+ heightArr[self.innerHTML])
    				//lBox[0].style.marginTop = -heightArr[self.innerHTML] +'px';

                    animate(lBox[0],{'margin-top': -heightArr[self.innerHTML] })
    			}
    		}

    		while(items[--count]){
    			items[count].addEventListener('click', showName,false);
    		}

    		//左侧鼠标滚动事件

    		var left = document.getElementById('left');

    		var handleLScroll = function(e){
    			var event = e || window.event;
    			var box = document.getElementsByClassName('l-box');
    			var maxHeight = 0;
    			box[0].style.marginTop = box[0].style.marginTop || '0px';
    			for(var i = 0; i < box.length; i++){
    				maxHeight += parseInt(box[i].clientHeight);
    			}
    			// console.log('box[0].style.marginTop: '+box[0].style.marginTop)
    			if(scrollFunc(event) > 0){//向上滚动
    				// console.log('上')
    				if(parseInt(box[0].style.marginTop) >= 0)
    					return;
    				else{
    					box[0].style.marginTop = parseInt(box[0].style.marginTop)+10 +'px';
    				}
    			}else{
    				if(parseInt(box[0].style.marginTop) <= -(maxHeight-100))
    					return;
    				box[0].style.marginTop = parseInt(box[0].style.marginTop)-10 +'px';
    			}
    		}

    		if(document.addEventListener){//W3C
    		    left.addEventListener('mousewheel', handleLScroll);
    		}else if(window.navigator.userAgent.match('Firefox')){//火狐
    			left.addEventListener('DOMMouseScroll', handleLScroll);
    		}else{//IE
    			left.onmousewheel = handleLScroll;
    		}

            function animate(obj,props,duration){
                //obj是一个dom对象，props是要改变的最终状态
                //比如props={left:100},就要求该dom对象 的left值变为100
                //写个渐变动画吧
                // debugger;
                var dura = duration || 500;
                var frame = 40   ;                  //帧数为每秒40帧
                var interval = 1000 / frame;
                for( var prop in props){
                    console.log( window.parseInt(window.getComputedStyle(obj)[prop]))
                    if(window.getComputedStyle)//w3c
                        var curtStyle = window.parseInt(window.getComputedStyle(obj)[prop]);
                    else//IE
                        var curtStyle = parseInt(obj.currentStyle(prop),10);
                    var endStyle = Math.round(props[prop]);
                    var speed = Math.round(endStyle/dura) == 0? 1 :  Math.round(endStyle/dura);
                    move(/*obj,prop,curtStyle*/);
                }

                function move(/*obj,prop,curtStyle*/){

                    curtStyle -= speed;
                    if( curtStyle < endStyle)
                        curtStyle = endStyle;
                    obj['style'][prop] = curtStyle +'px';

                    // 111
                        window.requestAnimationFrame(move)
                       //setTimeout(function(){move(obj,prop,curtStyle)}, interval);
                }
            }
    	</script>
    </body>
</html>
